	
			
			<template>
  <div>
    <div id="mybox1"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  methods: {
    myhandle() {
      var mybox = echarts.init(document.getElementById("mybox1"));
      var option = {
        title: {
          text: "财务报表",
          top:5,
          left:15,
          textStyle:{
            color:'#fff'
          }
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data:["支出","收入"],
          orient: "vertical",
            // top: "center",
            right:20,
            top:5,
             textStyle:{
                color:"#fff",
            }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["一月", "二月", "三月", "四月", "五月","六月","七月","八月","九月","十月","十一月","十二月"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "支出",
            type: "line",
            stack: "Total",
            lineStyle: {
                width: 3, // 设置线条的粗细
                color:"#fff"
            },
            data: [220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290,],
          },
          {
            name: "收入",
            type: "line",
            stack: "Total",
            lineStyle: {
                 width: 3, // 设置线条的粗细
                 color:"red"
            },
            data: [120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90]
          },
        ],
      };
      mybox.setOption(option)
    },
  },
   mounted() {
    this.myhandle();
  },
};
</script>

<style lang="less" scoped>
div{
    width: 100%;
    height: 100%;
}

</style>
			